<template v-model="active_getcollect">
<div>
<div class="contentbox" >
<!--  吸顶-->
  <van-sticky>
    <van-button  style="width: 100%;border: none">

          <div class="return" @click="back"><van-icon name="arrow-left" size="30px"  /></div>
          <div class="dotbtn" @click="getnewsubscribe">
            <van-icon name="plus" size="30px" v-show="no" ref="plus" />
            <van-icon name="success" size="30px" ref="succeed" v-show="yes"/>
          </div>
    </van-button>
  </van-sticky>

  <div class="textcontent">
    <div class="newstitle">{{newobj.title}}</div>
<!--    <div class="currenttime">{{newobj.sendTime}}</div>-->
<!--    <div><img :src="newobj.bannerImgUrl" alt=""></div>-->
    <div v-html="newobj.content" class="newscontent"></div>
    <div style="overflow: hidden;margin-top:50px">
      <div class="support" @click.once="getdianzan"  >点赞
        <van-icon name="like" size="18px"   :class="isZan?'red':''" />
        {{zan}}
      </div>
      <div class="collection" @click="getcollect" loading="true">收藏
        <van-icon name="star"  :class="isCollection?'yellow':''"  />
      </div>
<!--      <div class="collection" @click="getcollect" loading="true" v-else>收藏-->
<!--        <van-icon name="star"  ref="stars"  />-->
<!--      </div>-->
    </div>
  </div>

</div>
</div>
</template>

<script>
import {collectiontext, getsubscribe, getsubscribeList, newsdetail, praiseList,} from "@/api/http";
import {Toast} from "vant";
export default {
  name: "NewContent",
  data() {
    return {
      isCollection:false,
      isZan:false,
      newobj: {},
      time: "",
      zan:"",
      status:"true",
      list:[],
      flag:false,
      yes:false,
      no:true,
      like:""
      // isCollect:false
      // lll:''
    }
  },
  created() {
    // login("loginName",123456).then(res=>{
    //   console.log(res)
    // })
    //新闻详情
      newsdetail(this.tocontent).then(res => {
        console.log(res)
        this.newobj = res.data
        this.zan = res.data.zan
        // console.log(this.zan)
      })
    },

  props: {
    tocontent: {
      type: [String, Number],
      default: "",
    },
    tocontents:{
      type: [String, Number],
      default: "",
    }
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    back() {
      this.$router.go(-1)
    },
    //判断新闻详情是否被收藏
    newsbtn(){

    //  判断订阅
      getsubscribeList(this.tocontents).then(res=>{
        console.log(res)
      })
    },
    //  订阅新闻
    getnewsubscribe() {
      getsubscribe(this.tocontents).then(res => {
        console.log(res)
        if ( res.code != 0 ) {
          Toast.fail('请登陆后订阅！');
        }else if (res.code == 0&&this.$store.state.yes == false && this.$store.state.no == true ){
          Toast.success('订阅成功！');
          this.$refs.plus.style.display = "none"
          this.$refs.succeed.style.display = "block"
          this.$store.commit("changeyes",true)
          this.$store.commit("changeno",false)
        } else if (this.$store.state.yes == true && this.$store.state.no == false){
          Toast.success('取消订阅！');
          this.$refs.plus.style.display = "block"
          this.$refs.succeed.style.display = "none"
          this.$store.commit("changeyes", false)
          this.$store.commit("changeno", true)
        }

      })
    },

    //点赞
    getdianzan() {
      praiseList(this.tocontent).then(res => {
        console.log(res)
        if (res.code == 0&& this.flag==false) {
          // if (this.$store.state.loading == false){
          // console.log(res.code)
          this.isZan = true
          this.zan += 1
          this.flag = true
        }else if(res.code == 0 && this.flag==true){
          // this.$store.commit('changeflag', false)

          this.flag = false
        }
        if(res.code!=0){
          Toast.fail('请登陆后点赞！');
        }



        // }
      })
    },
  //  收藏
    getcollect(){
      newsdetail(this.tocontent).then(res => {
        console.log(res)
        this.$store.commit("changeisCollect",res.data.isCollect)
        // this.lll=res.data.isCollect
        console.log(this.$store.state.isCollect)

      })
      // eslint-disable-next-line no-debugger
      // debugger
      collectiontext(this.tocontent).then(res=>{
        console.log(res)
        if (this.$store.state.loading==false&&this.$store.state.isCollect==true) {
          // if (this.$store.state.loading == false){
            // console.log(res.code)
          Toast.success('取消收藏！');
          this.isCollection = false
          this.$store.commit("changeisCollect",false)
          this.$store.commit("changeloading",true)
        }else if(res.code == 0&&this.$store.state.isCollect==false) {
          console.log(this.$refs.stars)
         this.isCollection = true
          Toast.success('收藏成功！');
          this.$store.commit("changeisCollect",true)
          this.$store.commit("changeloading", false)
          // this.$store.commit("changezan",false)
        }
        if(res.code==403){Toast.fail('请登陆后收藏！');}


      })
    }
}
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.return {
  float: left;
  height: 30px;
  line-height: 30px;
}
.dotbtn {
  float: right;
  margin-left: 300px;
}

.support {
  float: left;
  margin-left: 50px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 1px solid gray;
  border-radius:20px ;
  text-align: center;
  margin-bottom: 30px;
}
.collection {
  float: right;
  margin-right: 50px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: 1px solid gray;
  border-radius:20px ;
  text-align: center;
  margin-bottom: 30px;
}
.newstitle {
  text-align: center;
  font-size: 22px;
  font-weight: bolder;
  margin-bottom: 15px;
  padding: 10px;
}
/deep/img {
  width: 100%;
}
/deep/p {
  margin-left:15px;
  margin-right:15px;

}
.red {
  color: red;
}
.yellow {
  color: yellow;
}
</style>